import {Popconfirm, Table} from "antd";
import {useNavigate} from "react-router-dom";
import {EditOutlined, KeyOutlined, DeleteOutlined} from "@ant-design/icons";
import '../../css/permission/RoleList.css';

const RoleList = (props) => {
    const {
        pageQueryRolesResp,
        pageQueryParam,
        setPageQueryParam,
        doPageQuerySysRoles,
        setRoleWriteModalParam,
        doDeleteRole
    } = props;

    const navigate = useNavigate();

    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            render: (text, record, index) => (
                <span
                    style={{
                        border: '1px solid #e0e0e0',
                        padding: '2px 8px',
                        borderRadius: '4px',
                        display: 'inline-block',
                        backgroundColor: '#f9f9f9',
                        color: '#666'
                    }}
                >
          {index + 1}
        </span>
            )
        },
        {
            title: '角色名称',
            dataIndex: 'roleName',
            key: 'roleName',
            render: (text) => <span style={{color: '#333', fontWeight: 500}}>{text}</span>
        },
        {
            title: '角色描述',
            dataIndex: 'roleDescription',
            key: 'roleDesc',
            render: (text) => <span style={{color: '#666'}}>{text || '无描述'}</span>
        },
        {
            title: '创建时间',
            dataIndex: 'createdTime',
            key: 'createdTime',
            render: (text) => <span style={{color: '#888', fontSize: '13px'}}>{text}</span>
        },
        {
            title: '创建人',
            dataIndex: 'createdByUserNickname',
            key: 'createdByUserNickname',
            render: (text) => <span style={{color: '#555'}}>{text}</span>
        },
        {
            title: '最后修改时间',
            dataIndex: 'lastModifiedTime',
            key: 'lastModifiedTime',
            render: (text) => <span style={{color: '#888', fontSize: '13px'}}>{text}</span>
        },
        {
            title: '最后修改人',
            dataIndex: 'lastModifiedByUserNickname',
            key: 'lastModifiedByUserNickname',
            render: (text) => <span style={{color: '#555'}}>{text}</span>
        }, {
            title: '操作',
            key: 'action',
            width: '280px',
            render: (text, record) => (
                <div style={{display: 'flex', justifyContent: 'center', gap: '8px'}}>
                    {/* 编辑按钮 - 使用橙色系，搭配编辑图标 */}
                    <button
                        className="action-btn edit-btn"
                        onClick={() => {
                            setRoleWriteModalParam({
                                visible: true,
                                isEdit: true,
                                roleInfo: {
                                    roleId: record.id,
                                    roleName: record.roleName,
                                    roleDescription: record.roleDescription
                                }
                            })
                        }}
                    >
                        <EditOutlined className="btn-icon" />
                        编辑
                    </button>

                    {/* 权限按钮 - 使用蓝色系，搭配权限图标 */}
                    <button
                        className="action-btn permission-btn"
                        onClick={() => {
                            navigate(`/permission/` + record.id);
                        }}
                    >
                        <KeyOutlined className="btn-icon" />
                        权限
                    </button>

                    {/* 删除按钮 - 使用红色系，搭配删除图标 */}
                    <Popconfirm
                        title="操作确认"
                        description="是否确认要删除该角色？此操作不可撤销。"
                        onConfirm={() => doDeleteRole(record.id)}
                        okText="确认"
                        cancelText="取消"
                        placement="left"
                    >
                        <button className="action-btn delete-btn">
                            <DeleteOutlined className="btn-icon" />
                            删除
                        </button>
                    </Popconfirm>
                </div>
            )
        }
    ];

    return (
        <div style={{margin: '16px', backgroundColor: '#fff', borderRadius: '8px', boxShadow: '0 2px 12px rgba(0, 0, 0, 0.06)'}}>
            <Table
                columns={columns}
                dataSource={pageQueryRolesResp?.records || []}
                components={{
                    Header: {
                        cell: (props) => (
                            <th {...props} style={{
                                ...props.style,
                                backgroundColor: '#f5f5f5',
                                color: '#333',
                                fontWeight: 600,
                                borderBottom: '1px solid #e8e8e8',
                                padding: '12px 16px'
                            }}/>
                        )
                    },
                    // 分页组件容器
                    Pagination: {
                        wrapper: (props) => (
                            <div className="custom-pagination-container">
                                <div className="pagination-info">
                                    共 {pageQueryRolesResp?.total || 0} 条记录
                                </div>
                                <div className="custom-pagination">
                                    {props.children}
                                </div>
                            </div>
                        )
                    }
                }}
                rowClassName={(record, index) =>
                    index % 2 === 0 ? 'even-row' : 'odd-row'
                }
                onRow={(record) => ({
                    style: {
                        transition: 'backgroundColor 0.2s, transform 0.1s',
                        borderBottom: '1px solid #f0f0f0'
                    },
                    onMouseEnter: (e) => {
                        e.currentTarget.style.backgroundColor = '#f0f7ff';
                    },
                    onMouseLeave: (e) => {
                        e.currentTarget.style.backgroundColor =
                            e.currentTarget.className.includes('even-row') ? '#fff' : '#fafafa';
                    }
                })}
                pagination={{
                    total: pageQueryRolesResp?.total || 0,
                    current: pageQueryParam.pageNum,
                    pageSize: pageQueryParam.pageSize,
                    showSizeChanger: true,
                    onChange: (pageNum, pageSize) => {
                        setPageQueryParam({...pageQueryParam, pageNum, pageSize});
                        doPageQuerySysRoles({...pageQueryParam, pageNum, pageSize});
                    },
                    showTotal: (total) => `共 ${total} 条`,
                    pageSizeOptions: ['10', '25', '50'],
                    showQuickJumper: true,
                    showPreviousNextJumpers: true,
                    size: 'middle'
                }}
                scroll={{ x: 'max-content' }}
                bordered={false}
                rowKey="id"
                loading={false}
            />
        </div>
    );
};

export default RoleList;
